<template>
    <!--pagesmineindexvuehtmlStart-->

    <div id="defaultId1">
        <view id="id9L8Vsr" class="mine              ">
            <!-- 标题栏 -->
            <cl-topbar id="idCujP3E" title="个人中心" background-color="#f7f7f7" :show-back="false">
            </cl-topbar>
            <!-- 等级情况 -->
            <view id="idDvaOL7" class="vip-level-container                  ">
                <image id="id8fpRru" src="/static/images/pages/mine/vip.png" mode="aspectFill">
                </image>
                <!-- 等级 -->
                <span id="idU8pA7K" class="                  vipLevel">Lv1
                </span>
                <!-- 卡号 -->
                <span id="idBRlJmv" class="                  vipId">卡号: 20221211091306181
                </span>
                <!-- 进度条 -->
                <view id="idd5lXwE" class="                  progress">
                    <!-- 左侧进度条 -->
                    <view id="idOlevQs" class="                  left-jindu">
                        <cl-progress id="idwfbeSu" :value="40" :show-text="false" :color="['#ffb875','#feba7d']">
                        </cl-progress>
                    </view>
                    <!-- 右侧字体样式 -->
                    <view id="id9Jeem9" class="                  right-text">
                        <em id="idlngZxQ" class="                  present">800
                        </em>
                        <em id="idmS9cV6" class="                  big">/
                        </em>
                        <em id="idJbvW4X" class="                  target">1000
                        </em>
                    </view>
                </view>
            </view>
            <!-- 头像信息栏 -->
            <view id="g692de">
            </view>
            <view id="gb957a" class="              u48fc31">
                <u-avatar id="c03d82" @click="getInfo()" ids="c03d82" fontSize="20" randomBgColor :colorIndex="0" :src="userInfo.avatar">
                </u-avatar>
                <view id="g01b22" class="       uaa541">
                    <text id="g34ad4">昵称：
                    </text>
                    <text id="g8c0f1">{{userInfo.nickName || '微信用户'}}
                    </text>
                </view>
            </view>
            <!-- 点餐栏 -->
            <!-- <MenuList id="idw2K2f9" class="                  menu" :menuList="menuList" >
               </MenuList> -->
            <!-- 邀请好友 -->
            <view id="idFnTapO" class="info                  ">
                <image id="idt4rkOT" class="    urg3wz4              " src="../../static/images/pages/home/image.png@2x.webp" mode="aspectFill">
                </image>
                <!-- <Swiper id="idw8JTWD"  :swiperHeight="180" >
                     </Swiper> -->
            </view>
            <!-- 用户服务 -->
            <view id="idw5jLru" class="                  user-server">
                <span id="idtbuTGp" class="                  title">用户服务
                </span>
                <!-- <MenuList id="idKCISCJ" class="user-menu                  " :menuList="userServerMenuList" :colums="3" >
                        </MenuList> -->
            </view>
        </view>
        <u-popup id="c258e5" :show="userShow" @close="closePopup1" @open="openPopup1" mode="center">
            <view id="c870ee" class="              u48fc3">
                <u-avatar id="c97bb3" @click="getInfo()" ids="c97bb3" fontSize="20" randomBgColor :colorIndex="0">
                </u-avatar>
                <view id="cb85bf" class="       uaa541">
                    <text id="cee622">昵称：
                    </text>
                    <u--input id="c66f06" v-model="nickname" class="      ubAE9mu" ids="c66f06" placeholder="请输入内容" border="surround" type="nickname" @blur="getNickname">
                    </u--input>
                </view>
                <u-button id="c3d483" @click="getNickNameFun()" class=" uGBcnAK" ids="c3d483" text="主要按钮" size="normal" type="primary">
                </u-button>
            </view>
        </u-popup>
    </div>
    <!--pagesmineindexvuehtmlEnd-->

</template>

<script>
    // interfaceCode
    //importStart

    import {
        wxxLogin
    } from '@/common/api.js';
    //importEnd

    export default {
        name: 'mine',
        // components: {
        //     MenuList
        // },
        mounted() {
            // defaultLoad	
            // defaultLoad
            // pagesmineindexvueMountedStart

            // pagesmineindexvueMountedEnd
        },
        watch: {
            "nickname": {
                handler(newValue) {
                    console.log(newValue, 999888777);
                    // if (newValue) {
                    // 	this.$nextTick(() => {
                    // 		this.$refs.popupData.setRules(this.rulesOrganize)
                    // 	})
                    // }
                },
            },
        },
        data() {
            return {
                // insertData
                // pagesmineindexvueDataStart

                // 用户信息
                userInfo: uni.getStorageSync('userInfo') || {},
                // avatar
                avatar: '',
                // popup1Show
                userShow: false,
                // nickname
                nickname: ''
                // pagesmineindexvueDataEnd

            };
        },

        methods: {
            // insertMethod
            // pagesmineindexvueMethodStart
            // getLogin
            async getLogin() {



                uni.login({
                    provider: 'weixin',
                    //使用微信登录
                    success: async function(loginRes) {
                        let res = await wxxLogin({
                            code: loginRes.code
                        });
                        if (res.code == 200) {
                            let token = res.data;
                            uni.setStorageSync('token', token);
                        }
                    }
                });



            }, // getInfo
            async getInfo() {



                wx.getUserProfile({
                    desc: '用于完善会员资料',
                    // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
                    success: res => {
                        console.log(res, 888444);
                    }
                });



            }, // closePopup1
            closePopup1() {

                this.popup1Show = false

            }, // openPopup1
            openPopup1() {

                this.popup1Show = true

            }, // openPopup
            openPopup(popupData) {

                this.popupData = popupData
                uni.$u.sleep().then(() => {
                    this.show = !this.show
                })

            }, // getInfo
            async getInfo() {



                wx.getUserProfile({
                    desc: '用于完善会员资料',
                    // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
                    success: res => {
                        console.log(res, 888444);
                    }
                });



            }, // getNickname
            getNickname(e) {


                console.log(e, 8887777)


            }, // getNickNameFun
            getNickNameFun() {

                console.log(this.nickname, 99988877)

            }
            // pagesmineindexvueMethodEnd

        },

        props: {
            // pagesmineindexvuePropsStart

            // pagesmineindexvuePropsEnd
        },

        components: {}
    };
</script>

<style lang="scss" scoped>
    .pagesmineindexvuecssStart {}

    .vipLevel {
        position: absolute;
        top: 18rpx;
        left: 48rpx;
        font-size: 120rpx;
        font-weight: 400;
        color: transparent;
        background: linear-gradient(113.3deg, rgba(196, 152, 144, 1) 0%, rgba(249, 236, 204, 1) 99.86%);
        -webkit-background-clip: text;
    }

    .vipId {
        position: absolute;
        top: 220rpx;
        right: 18rpx;
        font-size: 24rpx;
        font-weight: 400;
        letter-spacing: 1rpx;
        color: #ffeac6;
    }

    .progress {
        position: absolute;
        bottom: 0;
        display: flex;
        align-items: center;
        width: 100%;
        height: 88rpx;




    }

    .left-jindu {
        flex: 1;
        padding-left: 35rpx;
    }

    .right-text {
        min-width: 20%;
        max-width: 35%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 28rpx;
        color: #faefec;
        padding-right: 16rpx;




    }

    .present {
        padding-bottom: 16rpx;
        padding-left: 10rpx;
    }

    .big {
        font-size: 64rpx;
        margin-right: 8rpx;
        color: #febf89;
    }

    .target {
        padding-top: 16rpx;
        font-size: 34rpx;
        color: #feb274;
    }

    .u48fc31 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 16rem;
        height: 6.1rem;
        flex-direction: column;
        margin-top: 0.9rem;
    }

    .uaa541 {
        display: flex;
        align-items: center;
        flex-direction: row;
        margin-top: 1rem;
    }

    .menu {
        margin-top: 16rpx;
    }

    .user-server {
        margin-top: 24rpx;
        margin-bottom: 24rpx;
        width: 700rpx;
        height: 224rpx;
        display: flex;
        flex-direction: column;
        align-items: center;



    }

    .title {
        width: 100%;
        text-align: left;
        font-size: 32rpx;
        font-weight: 400;
        color: $main-text;
        padding-bottom: 10rpx;
    }

    .u48fc3 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 16rem;
        height: 8.7rem;
        flex-direction: column;
        margin-top: 0.9rem;
        padding-top: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
    }

    .ubAE9mu {
        width: 5.3rem;
    }

    .uGBcnAK {
        margin-top: 1rem;
    }

    .pagesmineindexvuecssEnd {}










































































































































































































































































































































































































































































    .mine {
        font-family: 'mine';
        width: 100%;
        min-height: 100%;
        background-color: $pages-background-color;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        // 头像信息栏
        .avator-info {
            width: 100%;
            height: 108rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left-info {
                width: calc(100% - 180rpx);
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding-left: 60rpx;



                span {
                    max-width: calc(100% - 160rpx);
                    font-size: 28rpx;
                    font-weight: 600;
                    color: $main-text;
                    margin-left: 4rpx;
                }



            }

            .right-scan-vip {
                width: 180rpx;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start;

                image {
                    width: 68rpx;
                    height: 68rpx;
                }
            }
        }

        //会员等级
        .vip-level-container {
            position: relative;
            margin-top: 10rpx;
            width: 700rpx;
            height: 360rpx;
            border-radius: 30rpx;
            background-size: 100% 100%;
            font-family: 'mine';
            overflow: hidden;
            box-shadow: 0rpx 0rpx 8rpx 0px #2f2845;

            //背景图片
            image {
                width: 100%;
                height: 100%;
            }

            //等级


            //卡号


            //进度条

        }

        //点餐栏


        // 邀请好友


        //用户服务



    }
</style>